import CSguide_logo from '../../assets/logo_transparent.png'
import './css/header.css'
import './css/bootstrap.min.css'
import { Component } from 'react'

class NavBar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      offset: 0,
      isZone: false
    }
  }

  scrollToAnchor = anchorName => {
    if (location.pathname !== '/') {
      location.href = '/'
      return
    }
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName)
      if (anchorElement) {
        anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' })
      }
    }
  }

  componentDidMount() {
    const pathName = location.pathname.split('/')
    if (pathName[pathName.length - 2] === 'center') {
      this.setState({
        isZone: true
      })
    } else window.addEventListener('scroll', this.bindHandleScroll)
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.bindHandleScroll)
  }

  bindHandleScroll = event => {
    // 滚动的高度
    const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false) || window.pageYOffset || (event.srcElement ? event.srcElement.body.scrollTop : 0)
    console.log(scrollTop)
    this.setState({ offset: scrollTop })
  }

  render() {
    return (
      <header id="header_wrapper">
        <div className="container">
          <div className="header_box">
            <div className="logo">
              <a href="#hero_section">
                <img width="190px" src={CSguide_logo} alt="logo" />
              </a>
            </div>
            <div className="nav-bar nav-bar-inverse" role="navigation">
              <div id="main-nav" className="navStyle">
                <ul className="nav nav-bar-nav" id="mainNav">
                  <li className={!this.state.isZone && this.state.offset < 500 ? 'active' : ''}>
                    <a onClick={() => this.scrollToAnchor('intro')}>Home</a>
                  </li>
                  <li className={!this.state.isZone && this.state.offset >= 500 && this.state.offset < 1100 ? 'active' : ''}>
                    <a onClick={() => this.scrollToAnchor('news')}>News</a>
                  </li>
                  <li className={!this.state.isZone && this.state.offset >= 1100 && this.state.offset < 2055 ? 'active' : ''}>
                    <a onClick={() => this.scrollToAnchor('explore')}>Explore</a>
                  </li>
                  <li className={this.state.isZone ? 'active' : ''}>
                    <a href="/center">Zone{console.log(this.state.isZone)}</a>
                  </li>
                  <li className={!this.state.isZone && this.state.offset == 2055 ? 'active' : ''}>
                    <a onClick={() => this.scrollToAnchor('contact')}>Contact</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
    )
  }
}

export default NavBar
